<template>
	<div v-if="show" style="position: fixed;top: 120px;left: calc(100% - 240px);width: 200px;">
		<el-progress :text-inside="true" :stroke-width="16" :percentage="jd" color="#ff3c1a" />
		<div style="text-align: center;color:#ff3c1a;">导出进度</div>
	</div>
</template>
<script>
	import {
		reactive,
		toRef,
		ref,
		computed

	} from 'vue';
	import {
		getProgress,
		clearProgress
	} from '/@/api/export.js'
	export default {
		props: {},
		setup(props, ctx) {
			const jd = ref(0)
			const show = ref(false)
			let timer = null
			const begin = (name) => {
				jd.value = 0
				show.value = true

				timer = setInterval(() => {
					//需要定时执行的代码
					getProgress({
						name: name
					}).then(res => {
						jd.value = parseInt(res.message)
						if (jd.value >= 100) {
							end()
						}
					}).catch(err => {
						end()
					})
				}, 3000)


			}
			const end = () => {
				show.value = false
				if (timer != null) {
					clearInterval(timer)
				}
			}
			return {
				jd,
				show,
				begin
			}
		}
	}
</script>
